<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点解喔？</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .main {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rebeccapurple;
        }
        
        .img {
            width: 300px;
            height: 400px;
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: center;
            background-image: url("");
        }
    </style>
</head>

<body>
    <div class="main">
        <h1>欧尼酱~</h1>
        <div class="img"></div>
    </div>
    <script>
        let sc_width = window.innerWidth
        let sc_height = window.innerHeight
        let main = document.querySelector('.main')
        let imgg = document.querySelector('.img')
        main.style.width = sc_width + 'px'
        main.style.height = sc_height + 'px'
    </script>
</body>

</html>